<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Windows 下色彩管理的一些经验 | blog</title>
<meta name="generator" content="Jekyll v3.9.2" />
<meta property="og:title" content="Windows 下色彩管理的一些经验" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="一些 (Windows 上) 微薄的色彩管理经验, 不一定正确." />
<meta property="og:description" content="一些 (Windows 上) 微薄的色彩管理经验, 不一定正确." />
<link rel="canonical" href="https://tsagaanbar.gitee.io/blog/win/some-experience-on-color-management/" />
<meta property="og:url" content="https://tsagaanbar.gitee.io/blog/win/some-experience-on-color-management/" />
<meta property="og:site_name" content="blog" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2022-04-30T00:16:15+00:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Windows 下色彩管理的一些经验" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2022-04-30T00:16:15+00:00","datePublished":"2022-04-30T00:16:15+00:00","description":"一些 (Windows 上) 微薄的色彩管理经验, 不一定正确.","headline":"Windows 下色彩管理的一些经验","mainEntityOfPage":{"@type":"WebPage","@id":"https://tsagaanbar.gitee.io/blog/win/some-experience-on-color-management/"},"url":"https://tsagaanbar.gitee.io/blog/win/some-experience-on-color-management/"}</script>
<!-- End Jekyll SEO tag -->

    <link rel="stylesheet" href="/blog/assets/css/style.css?v=5a3a055c96aa4035d7a987d1ed733ff6fc09a8b3">
    <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->

<!-- Setup Google Analytics -->



<!-- You can set your favicon here -->
<!-- link rel="shortcut icon" type="image/x-icon" href="/blog/favicon.ico" -->

<!-- end custom head snippets -->

  </head>
  <body>
    <div class="container-lg px-3 my-5 markdown-body">
      
      <p><a href="https://tsagaanbar.gitee.io/blog/">tsagaanbar's Blog</a></p>
      <h1>Windows 下色彩管理的一些经验</h1>

      <blockquote>
  <p>一切都开始于一台广色域显示器, 以及截图时对于色彩的执着.</p>
</blockquote>

<p>自从开始留意到截图在查看时的颜色和实际有差别时, 就一直在查找原因. 色彩管理的文章看了很多, 截图取色之类的也试了很多, 可惜一直不得其解.</p>

<p>想当初, 花了不少时间才弄明白色彩空间的概念. 而现在, 几乎花了更多的时间在色彩管理上.</p>

<p>这次探讨的起因还得从前几日觉得的 bilibili 的 UWP 客户端中的视频封面和网页端中的色彩不一致开始.</p>

<p>中间的过程很繁琐, 就不详细说了, 直接记录结论吧. 总之没想到花了这么多时间, 很惭愧, 但也觉得值过了.</p>

<h2 id="配置">配置</h2>

<ul>
  <li>笔记本: Lenovo Yoga C940</li>
  <li>操作系统: Windows 11</li>
  <li>屏幕型号: LEN8B93</li>
</ul>

<p>笔记本中自带了一个色彩管理文件, “Lenovo Yoga LCD Monitor”, 可以通过搜索显示屏型号, 有帖子给出了 OEM 提供的配置文件.</p>

<p>尚不清楚这个配置文件究竟做了什么 (是真正进行了校色还是只是抑制了过饱和), 笔者也没有校色仪, 也不会如何进行校色.</p>

<h2 id="已知知识">已知知识</h2>

<p>很多软件是不支持色彩管理的, 比如聊天工具, Visual Studio, JetBrains 全家桶等日常软件. 这些软件直接输出 RGB 数值.</p>

<p>而笔记本使用的是广色域显示器, 于是平时屏幕上看到的几乎是过饱和的色彩 (但是笔者似乎已经习惯了这种鲜艳的色彩 😂).</p>

<p>而目前的浏览器 (Microsoft Edge / Chrome), Photoshop 等支持并默认启用色彩管理, 也就是会调用显示器的色彩文件对网络上的 JPEG 图像 (包括通过 CSS 指定的 RGB 颜色等) 进行色彩变换. 也就是说, 这些软件实际输出的 RGB 值不等于原始的 RGB 值.</p>

<p>但是 Firefox 默认按 sRGB 模式工作, 也就是直接输出图像原本的像素值, 于是同样的图片, 在 Firefox 中查看, 屏幕上看到的效果往往就会过饱和.</p>

<h2 id="对截图的影响">对截图的影响</h2>

<p>根据实验, 如果进行截图 / 屏幕快照 / 录屏等操作, 获取到的就是程序最终输出给显示器的数值.</p>

<p>一般的截图软件, 既不会嵌入色彩配置文件 (解释这些数据是在何种色彩空间下进行色彩的描述, 亦即表示这些数据究竟对应何种现实的颜色), 也不会进行色彩空间的变换 (转换到大家默认的 sRGB 空间), 直接就将这些数据存储. 于是:</p>

<ul>
  <li>在不具备色彩管理的软件中, 往往会将这些数据当成是 sRGB 下的而处理, 或者就直接输出.</li>
  <li>在具备色彩管理的软件中, 由于缺失色彩配置文件, 一般也会将其当成 sRGB 下的数据进行处理.</li>
</ul>

<p>而事实上, 这些截图中的数据本应当根据相应的配置文件 (也就是这些软件进行色彩转换时所依据的显示器的色彩配置文件) 进行解释.</p>

<h3 id="截取未进行色彩管理的程序界面">截取未进行色彩管理的程序界面</h3>

<p>于是, 如果截取的是 QQ 等未进行色彩管理的界面中的图像 (直接是 sRGB 空间下的数据):</p>

<ul>
  <li>在未进行色彩管理的软件中查看, 一般直接输出同样的像素值, 因此在同一台计算机上, 观感就是一致的 (但实际上是过饱和).</li>
  <li>而在进行了色彩管理的软件 (比如 MS Edge, Photoshop, Windows 照片 等) 中查看, 观感上往往就会暗淡一些 (但是可以认为看到的是正确的色彩).</li>
</ul>

<p>如果将这样的图片直接发送给其他使用 sRGB 显示器的用户, 由于一般默认被当作 sRGB 解释, 他们看到的应当也是正确的色彩.</p>

<h3 id="截取进行了色彩管理的程序界面">截取进行了色彩管理的程序界面</h3>

<p>但是如果截取的是浏览器, 或者其他经过色彩管理的软件中的图像, 情况就复杂了.</p>

<p>同前所述, 由于这些图像中既未嵌入色彩配置文件, 也未进行色彩转换, 于是其中的色彩数值将不能得到正确的解释.</p>

<ul>
  <li>如果在不支持色彩管理的软件中查看 (配置文件被无视), 软件往往会将这些 RGB 值直接输出给显示器, 在当前设备上自然没问题, 一旦更换设备就会发生失真.</li>
  <li>如果在具备色彩管理能力的软件中查看, 又因为没有色彩配置文件, 一般将其当成是 sRGB 下的数据而进行解释并再次像显示器色彩空间进行转换, 在当前设备上查看便 (往往) 会有差谬, 其他设备亦是如此.</li>
</ul>

<p>于是便需要手动修正:</p>

<ul>
  <li>要么嵌入相应的色彩配置文件 (也就是被截图的软件进行色彩管理时所使用的显示器配置文件), 但是嵌入的色彩配置文件会带来文件大小的增减, 并且有可能被忽视 (比如分享给其他用户时所使用的 IM 软件等);</li>
  <li>要么根据相应的色彩配置文件进行色彩空间转换 (转换到常用的 sRGB 色彩空间去). 不过需要注意, 这样转换来又转换回去, 色彩同最开始的相比就会有些许变化.</li>
</ul>

<h2 id="小结">小结</h2>

<p>总之终于是大概搞明白了, 而且方法也是有了:</p>

<p>比较稳妥的方法就是确保自己截图得到的 / 分享给别人的数据是处于 sRGB 空间下的.</p>

<p>可是比较头疼的问题就是需要确定哪些软件进行了色彩管理, 哪些没有.</p>

<ul>
  <li>目前几个常用浏览器的情况算是已知了. (MS Edge / Chrome 现在默认似乎是按显示器配置文件解释 Untagged 的图像内容这一点倒是也有点头疼)</li>
  <li>其他常用软件比如 Visual Studio, JetBrains 的 IDE 等应该是输出 sRGB 的 (未进行色彩管理的).</li>
  <li>尚不清楚 Visual Studio Code 这种 Electron 应用有没有进行色彩管理. (似乎是有的, 因为之前 HDR 不兼容, 还需要在启动参数里强制使用 sRGB 来着) (TIPS: 如果分享代码截图的话, 可以将 VS Code 里的代码粘贴进 PowerPoint 文本框, 再复制出来就是图片了)</li>
</ul>

<p>其实还有关于录制视频以及视频播放时色彩管理的问题, 这个就等之后再研究吧 🤣.</p>



      
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
    <script>anchors.add();</script>
  </body>
</html>
